<template>
  <div>
    <BaseModal @onSubmit="onSubmit" @onClose="onClose(data.userid)" :show="show" title="编辑用户">
      <div class="demo-input-suffix">
        <span class="form-input-label">用户ID：</span>
        <el-input v-if="data.userid" disabled v-model="data.userid" placeholder="请输入用户ID"></el-input>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">用户名：</span>
        <el-input v-model="data.username" placeholder="请输入用户名"></el-input>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">手机号：</span>
        <el-input v-model="data.phone" placeholder="请输入手机号"></el-input>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">邮箱：</span>
        <el-input type="email" v-model="data.email" placeholder="请输入邮箱"></el-input>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">性别：</span>
        <el-select v-model="data.sex" placeholder="请选择性别">
          <el-option
            v-for="item in sexes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

      <div class="demo-input-suffix">
        <span class="form-input-label">用户状态：</span>
        <el-select v-model="data.status" placeholder="请选择用户状态">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

<!--      <div class="demo-input-suffix">-->
<!--        <span class="form-input-label">用户学号：</span>-->
<!--        <el-input v-model="data.studentid" placeholder="请输入用户学号"></el-input>-->
<!--      </div>-->

<!--      <div class="demo-input-suffix">-->
<!--        <span class="form-input-label">学校名称：</span>-->
<!--        <el-autocomplete-->
<!--          class="inline-input"-->
<!--          v-model="selectedSchool"-->
<!--          :fetch-suggestions="querySchool"-->
<!--          placeholder="请输入学校名称"-->
<!--          @select="selectSchool"-->
<!--        ></el-autocomplete>-->
<!--      </div>-->

<!--      <div class="demo-input-suffix">-->
<!--        <span class="form-input-label">学院名称：</span>-->
<!--        <el-autocomplete-->
<!--          class="inline-input"-->
<!--          v-model="selectedCollege"-->
<!--          :fetch-suggestions="queryCollege"-->
<!--          placeholder="请输入学院名称"-->
<!--          @select="selectCollege"-->
<!--        ></el-autocomplete>-->
<!--      </div>-->

<!--      <div class="demo-input-suffix">-->
<!--        <span class="form-input-label">专业名称：</span>-->
<!--        <el-autocomplete-->
<!--          class="inline-input"-->
<!--          v-model="selectedMajor"-->
<!--          :fetch-suggestions="queryMajor"-->
<!--          placeholder="请输入专业名称"-->
<!--          @select="selectMajor"-->
<!--        ></el-autocomplete>-->
<!--      </div>-->

<!--      <div class="demo-input-suffix">-->
<!--        <span class="form-input-label">班级名称：</span>-->
<!--        <el-autocomplete-->
<!--          class="inline-input"-->
<!--          v-model="selectedClass"-->
<!--          :fetch-suggestions="queryClass"-->
<!--          placeholder="请输入班级名称"-->
<!--          @select="selectClass"-->
<!--        ></el-autocomplete>-->
<!--      </div>-->

<!--      <div class="demo-input-suffix">-->
<!--        <span class="form-input-label">入学时间：</span>-->
<!--         <el-date-picker-->
<!--          v-model="data.admission_date"-->
<!--          type="date"-->
<!--          format="yyyy-MM-dd"-->
<!--          value-format="yyyy-MM-dd"-->
<!--          placeholder="选择日期">-->
<!--        </el-date-picker>-->
<!--      </div>-->
    </BaseModal>
  </div>
</template>
<script>
import modalClose from "@/mixins/modalClose";
import CreateFilter from "@/mixins/CreateFilter";
import { studentModel } from "@/api/models";
import { Message } from "element-ui";
export default {
  mixins: [modalClose, CreateFilter],
  components: {},
  data() {
    return {
      schools: [],
      colleges: [],
      majors: [],
      classes: [],
      data: {
        userid: null,
        username: null,
        phone: null,
        email: null,
        sex: "",
        status: null,
        studentid: '',
        school_id: null,
        college_id: null,
        major_id: null,
        class_id: null,
        admission_date: null
      }
    };
  },
  props: {
    obj: {
      type: Object,
      default: null
    }
  },
  watch: {
    obj: function(value) {
      if(value) {
        studentModel.item(value.userid, res => {
          this.data = res.data;
          this.data.sex = res.data.sex === 1 ? "M":"F"
          this.selectedSchool = res.data.school_name;
          this.selectedCollege = res.data.college_name;
          this.selectedMajor = res.data.major_name;
          this.selectedClass = res.data.class_name;
          //  this.selectedSchool = res.data.school_id;
          // this.selectedCollege = res.data.college_id;
          // this.selectedMajor = res.data.major_id;
          // this.selectedClass = res.data.class_id;
        })
      }else{
        this.data = {}
      }
    }
  },
  mounted() {},
  methods: {
    getItem() {
      studentModel.item(this.id, res => {
        this.data = res.data;
        this.data.sex = res.data.sex === 1 ? "M":"F"
      });
    },
    onSubmit() {
      let d = this.data;
      if (
        !d.username ||
        !d.phone ||
        !d.email ||
        !d.sex ||
        !d.status
        //   ||
        // !d.studentid ||
        // !d.school_id ||
        // !d.college_id ||
        // !d.major_id ||
        // !d.class_id ||
        // !d.admission_date
      ) {
        // debugger
        return Message.warning("请填完整信息");
      }
       var regex = /^1[3-9]\d{9}$/;
       if(!regex.test(d.phone)) {
         return Message.warning("请填写正确格式的手机号");
       }
      var regex2 = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
      if(!regex2.test(d.email)) {
        return Message.warning("请填写正确格式的邮箱");
      }
      if(d.userid) {
        studentModel.update(d.userid, d, res => {
          Message.success(res.message)
          this.onClose(d.userid)
          this.data = {}
          this.$emit('afterSubmit')
        }, err => {
          Message.error(err.message)
          this.data = {}
        })
      }else{
        studentModel.create(d, res => {
          Message.success(res.message)
          this.onClose(d.userid)
           this.data = {}
          this.$emit('afterSubmit')
        }, err => {
          Message.error(err.message)
          this.data = {}
        })
      }
    },
    onClose(userid) {
      this.$emit("onClose");
      if(!userid) {
        this.data = {}
      }
    }
  }
};
</script>
<style lang="scss">
</style>